<template>
  <el-dialog :title="dialogTitle" :visible.sync="visible" width="600px" :before-close="handleClose">
     <div class="warning-text">
   </div>
    <el-form ref="createForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="链接名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入链接名称" clearable />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" :rows="3" />
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-radio-group v-model="form.state">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">停用</el-radio>
        </el-radio-group>
      </el-form-item> 
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import dianshangHuishouApi from '@/api/tenantApis/dianshangHuishou'
export default {
  name: 'addLink',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      id: "",
      form: {
        name: '',
        code: null,
        remark: '',
        state:1
      },
      rules: {
        name: [{ required: true, message: '请输入链接名称', trigger: 'blur' }],
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.id ? '修改链接' :'创建链接'
    }
  },
  methods: {
 
    open(row) {
      this.id = row.id
      this.form = {
        name: row.name,
        code: row.code,
        state: row.state,
        remark: row.remark
      }
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.resetForm()
    },
    handleSubmit() {
      this.$refs.createForm.validate(valid => {
        if (valid) {
        
          const handleApiResult = () => {
            this.$modal.msgSuccess(this.id ? '卡密修改成功' : '卡密创建成功');
            this.$emit('success');
            this.handleClose();
          };

        
          const handleApiError = (error, operation) => {
            console.error(`${operation}卡密失败:`, error);
            // this.$modal.msgError(`${operation}卡密失败: ${error.message || '未知错误'}`);
          };

          try {
            const apiMethod = this.id ? dianshangHuishouApi.outLinkBackEdit : dianshangHuishouApi.outLinkBackAdd;
            if(this.id) {
              this.form.id = this.id
            }
            apiMethod(this.form)
              .then(handleApiResult)
              .catch(error => {
                handleApiError(error, this.id ? '修改' : '创建');
              });
          } catch (error) {
            // 捕获可能的同步错误（如apiMethod不存在）
            console.error('接口调用异常:', error);
            // this.$modal.msgError('操作失败，请重试');
          }

        }
      })
    },
    resetForm() {
      this.id = ''
      this.form = {
        name: '',
        code: null,
        remark: '',
        state:1
      }
      this.$refs.createForm.resetFields()
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
.warning-text {
  margin-bottom: 10px;
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    text-align: left;
}
</style>